<template>
  <view class="new-card">
    <view class="info">每日一刷，快乐无限...</view>
    <view class="aline"></view>
    <view class="title">2020年下教育公共题（上）</view>
    <view class="schedule">
      <view>已做: 134</view><view>未做: 55</view><view>错题: 99</view>
    </view>
    <!-- 进度 -->
    <view class="operate">
      <view @tap="goLearn">开始学习</view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				colid: 1
			}
		},
    methods:{
      goLearn(){
        uni.navigateTo({
          url:'/pages/chooes/chooes?colid=' + this.colid
        })
      }
    }
	}
</script>

<style scoped>
.new-card {
  height: 430rpx;
  background-color: #FFFFFF;
  border-radius: 30rpx;
  padding: 0 40rpx;
  position: relative;
}
.info{
  color: #333;
  font-weight: 400rpx;
  padding-top: 30rpx;
  padding-bottom: 20rpx;
  font-size: 26rpx;
}
.title {
  padding-top: 20rpx;
  font-size: 50rpx;
  padding-bottom: 20rpx;
}
.aline{
  height: 1rpx;
  width: 100%;
  background-color: #ccc;
}
.schedule{
  display: flex;
  font-size: 28rpx;
  color: #555555;
}
.schedule>view{
  margin-right: 15rpx;
  padding-right: 15rpx;
  border-right: solid 1rpx #CCCCCC;
}
.schedule>view:last-child{
  border: none;
  color: red;
}
.operate {
  position: absolute;
  bottom: 20rpx;
  width: calc(100% - 80rpx);
  display: flex;
  flex-direction: row-reverse;
}
.operate>view {
  width: 160rpx;
  height: 60rpx;
  font-size: 30rpx;
  line-height: 60rpx;
  text-align: center;
  background-color: #1091e5;
  color: #FFFFFF;
  border-radius: 16rpx;
  box-shadow:rgba(0,0,0,.3)
}
</style>
